import React, { useState, useEffect } from 'react';
import { Layout, Button, Typography, Card, Table, Statistic } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons'; // 新增：导入LaptopOutlined和NotificationOutlined图标
import { Link, useLocation } from 'react-router-dom';
import SideMenu from '../components/SideMenu';  // 新增：导入公共菜单组件

const { Header, Content, Sider } = Layout;
const { Title } = Typography;

const ZijinZhongxin = () => {
    const [sellerData] = useState({ storeName: 'FENGDEKUN' });
    const [activeMenuKey, setActiveMenuKey] = useState('11'); // 结算管理-资金中心的key
    const location = useLocation();

    // 监听路由变化，同步菜单选中状态
    useEffect(() => {
        if (location.pathname === '/fund-center') setActiveMenuKey('11');
    }, [location]);

    const handleMenuItemClick = (e) => {
        setActiveMenuKey(e.key);
    };

    const columns = [
        { title: '序号', dataIndex: 'id', key: 'id' },
        { title: '资金账户', dataIndex: 'account', key: 'account' },
        { title: '创建时间', dataIndex: 'date', key: 'date' },
        { title: '提现金额', dataIndex: 'amount', key: 'amount' },
        { title: '提现状态', dataIndex: 'status', key: 'status' },
        { title: '收款账户', dataIndex: 'bank', key: 'bank' },
    ];

    const data = [
        { id: '1', account: '货款提现', date: '2029-06-10 12:00:46', amount: '300.00', status: '提现成功', bank: '民生银行（1224）' },
        { id: '2', account: '货款提现', date: '2029-06-10 12:00:46', amount: '300.00', status: '提现成功', bank: '民生银行（1224）' },
    ];

    const menuItems = [
        { key: 'sub1', label: <span><UserOutlined />首页</span>, children: [] },
        {
            key: 'sub2',
            label: <span>商品管理</span>,
            children: [
                { key: '1', label: '商品列表' },
                { key: '2', label: '机会商品' },
                { key: '3', label: '样品管理' },
                { key: '4', label: '上新生命周期' },
                { key: '5', label: '图片更新' },
            ],
        },
        {
            key: 'sub3',
            label: <span><LaptopOutlined />备货单管理</span>,
            children: [
                { key: '6', label: '我的备货单' },
                { key: '7', label: '发货台' },
                { key: '8', label: '发货单列表' },
                { key: '9', label: '物流计费核实' },
            ],
        },
        {
            key: 'sub4',
            label: <span><LaptopOutlined />价格管理</span>,
            children: [{ key: '10', label: '调价管理' }], // 原高亮项key为'10'
        },
        {
            key: 'sub5',
            label: <span><LaptopOutlined />结算管理</span>,
            children: [
                { key: '11', label: <Link to="/fund-center">资金中心</Link> }, // 目标高亮项key为'11'
                { key: '12', label: '对账中心' },
                { key: '13', label: '资金限制' },
                { key: '14', label: '结算数据' },
            ],
        },
        {
            key: 'sub6',
            label: <span><LaptopOutlined />质量管理</span>,
            children: [{ key: '15', label: '质量看板' }],
        },
        {
            key: 'sub7',
            label: <span><LaptopOutlined />授权管理</span>,
            children: [{ key: '16', label: '授权' }],
        },
        {
            key: 'sub8',
            label: <span><LaptopOutlined />店铺营销</span>,
            children: [{ key: '17', label: '营销活动' }],
        },
        {
            key: 'sub9',
            label: <span><LaptopOutlined />店铺管理</span>,
            children: [{ key: '18', label: '店铺装修' }],
        },
        {
            key: 'sub10',
            label: <span><LaptopOutlined />合成中心</span>,
            children: [{ key: '19', label: '看板' }],
        },
        {
            key: 'sub11',
            label: <span><NotificationOutlined />销售管理</span>,
            children: [{ key: '20', label: '销售看板' }],
        },
    ];

    return (
        <Layout>
            {/* 修改：使用公共SideMenu组件 */}
            <Sider width={200} style={{ background: '#fff' }}>
                <SideMenu 
                    activeMenuKey={activeMenuKey} 
                    onMenuItemClick={handleMenuItemClick}
                />
                <div style={{ position: 'absolute', bottom: 10, width: '180px' }}>
                    <Button type="primary" block style={{ backgroundColor: '#ff6600', color: 'white', border: 'none' }}>
                        卖家中心
                    </Button>
                </div>
            </Sider>

            <Layout>
                <Header style={{ background: '#fff', padding: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '64px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Title level={5} style={{ color: '#ff6600', fontWeight: 'bold', marginRight: '10px' }}>DUK</Title>
                            <Title level={5} style={{ color: '#666' }}>跨境卖家</Title>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Card style={{ background: '#ff6600', color: 'white', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                Seller Central
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                运营对接
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                反馈
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px' }}>
                                {sellerData.storeName}
                            </Card>
                        </div>
                    </div>
                </Header>

                <Content style={{ padding: '0 50px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
                        <Card style={{ width: '30%', textAlign: 'center' }}>
                            <Statistic title="总金额(CNY)" value="286.00" prefix="¥" />
                            <Button type="link" style={{ color: '#1890ff' }}>收支明细</Button>
                            <Button type="default" style={{ backgroundColor: '#ffe6cc', color: '#ff6600', border: 'none', marginTop: '10px' }}>
                                店铺资金限制中 查看详情
                            </Button>
                        </Card>
                        <Card style={{ width: '30%', textAlign: 'center' }}>
                            <Statistic title="可用余额(CNY)" value="286.00" prefix="¥" />
                            <Button type="primary" style={{ backgroundColor: '#ff6600', color: 'white', border: 'none', marginTop: '10px' }}>
                                提现
                            </Button>
                        </Card>
                        <Card style={{ width: '30%', textAlign: 'center' }}>
                            <Statistic title="账户预留金额(CNY)" value="286.00" prefix="¥" />
                            <Button type="primary" style={{ backgroundColor: '#ff6600', color: 'white', border: 'none', marginTop: '10px' }}>
                                充值
                            </Button>
                            <Button type="link" style={{ color: '#1890ff', marginTop: '10px' }}>充值记录</Button>
                        </Card>
                    </div>
                    <div style={{ marginBottom: '20px' }}>
                        <Title level={4}>提现记录</Title>
                    </div>
                    <Table columns={columns} dataSource={data} rowKey="id" />
                </Content>
            </Layout>
        </Layout>
    );
};

export default ZijinZhongxin;